<template>
	<div class="wrapZ">
		<div class="top">
			<div class="input">
				<el-input v-model="inpWord" :value="inpWord" placeholder="请输入账号"
					@keyup.enter.native="searchUserManager(1)"></el-input>
				<el-input v-model="inpRole" :value="inpRole" placeholder="请输入角色"
					@keyup.enter.native="searchUserManager(2)"></el-input>
				<el-button icon="el-icon-search" type="primary" @click.native="searchUserManagerClick" style="background-color:#106ab1 ;">搜索</el-button>
			</div>
			<el-button type="primary" icon="el-icon-circle-plus-outline" class="userBtn"
				@click="adduser()">添加</el-button>
		</div>
		<div class="formList">
			<el-table :data="userList" style="width: 100%">
				<el-table-column prop="userName" label="账号">
				</el-table-column>
				<el-table-column prop="roleName" label="角色">
							<template slot-scope="scope">
							<span v-for="(x, index) in userList[scope.$index].roles" :key="index"><span v-if="index != 0"> /
								</span>{{ x.roleName }}</span>
						</template>
				</el-table-column>
				<el-table-column>
					<template slot="header">
						操作
					</template>
					<template slot-scope="scope">
						<span style="color: #77b24c;margin:0 10px; cursor: pointer;" @click="Reviseuser(scope.row)">修改</span>
						<span style="cursor: pointer; color: red                                                                                                                                                                                                                                                                                                                                                                                                                ;" @click="deleteuser(scope.row)">删除</span>
					</template>
				</el-table-column>
			</el-table>
			
			<el-pagination layout="prev, pager, next" :total="totaSize" :page-size="pageSize"
				@current-change="changePage" :current-page.sync="pageIndex">

			</el-pagination>
		</div>
		<!-- 添加 -->
		<el-dialog title="请添加新用户" :visible.sync="centerDialogVisible" center>
			<el-form :model="formData" class="tp fromReg" :rules="rules" ref="myForm">
				<el-form-item label="账号:" prop="userName">
					<el-input v-model="formData.userName" autocomplete="off" placeholder="请添加新的账户名"></el-input>
				</el-form-item>
				<el-form-item label="密码:" prop="pwd">
					<el-input v-model="formData.pwd" autocomplete="off" placeholder="初始密码" type="password"></el-input>
				</el-form-item>
			<!-- 	<el-form-item class="select" label="角色:" prop="roleName">
					<el-select v-model="formData.roleName" placeholder="请选择">
						<el-option v-for="item in themes" :key="item.value" :label="item.roleName" :value="item.roleId">
						</el-option>
					</el-select>
				</el-form-item> -->
				
				<el-form-item label="角色:" prop="roleName">
					<el-checkbox-group v-model="checkList2">
					  <el-checkbox v-for="(x,index) in themes" :label="x.roleName"  :value="x.roleId" :key="index">{{ x.roleName }}</el-checkbox> 
					</el-checkbox-group>     
				</el-form-item>
				 
				
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="addUserManagement('myForm')" class=" wid" style="background-color:#106ab1 ; color: white;">确 定</el-button>
				<el-button @click="cancel2('myForm')" class="gray wid">取 消</el-button>

			</span>
		</el-dialog>
		<!-- 删除 -->
		<el-dialog :visible.sync="dialogTableVisible">
			<b>确认删除该用户？</b>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delOk()" class="wid" style="background-color:#106ab1; color: white;">确 定</el-button>
				<el-button @click="dialogTableVisible = false" class="gray wid">取 消</el-button>
			</span>
		</el-dialog>
		<!-- 修改 -->
		<el-dialog class="" title="请修改当前用户信息" :visible.sync="ReviseDialogVisible" center>
			<el-form :model="formData" class="tp" :rules="rules" ref="myForm">
				<el-form-item label="账号:" prop="userName">
					<el-input v-model="formData.userName" autocomplete="off" placeholder="原账号"></el-input>
				</el-form-item>
				<el-form-item label="密码:" prop="pwd">
					<el-input v-model="formData.pwd" autocomplete="off" placeholder="初始密码" type="password"></el-input>
				</el-form-item>
				<el-form-item label="角色:" prop="roleName">
					<el-checkbox-group v-model="RoleNames">
					  <el-checkbox v-for="(x,index) in themes" :label="x.roleName"  :value="x.roleId" :key="index">{{ x.roleName }}</el-checkbox> 
					</el-checkbox-group>     
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer ">
				<el-button class=" wid" style="background-color:#106ab1 ; color: white;" @click="ReviseUserManagement('myForm')">确 定</el-button>
				<el-button class="gray wid" @click="cancel('myForm')">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import axios from 'axios';
	export default {
		data() {
			return {
				DquserId:0, //当前登录的账号id
				RoleNames:[], //权限名
				roleIds:[],	 //添加的权限id
				baseUrl: require("../js/baseUrl.js").baseUrl,
				pageIndex: 1, //页数
				pageSize: 5, //每页几条
				totaSize: 0,
				originalName: "",
				originalPwd: "",
				originalRoleid: [],
				inpRole: "", //角色输入框的值
				inpWord: "", //账号输入框的值
				searchWord: "", //搜索值1
				searchRole: "",
				userList: [],
				checkList2:[],
				themes: [], //角色
				changeuserId: "",
				deluserId: "",
				formData: {
					userName: '',
					pwd: '',
					roleName: '',
					// roleId: "",
				},
				dialogTableVisible: false,
				centerDialogVisible: false,
				ReviseDialogVisible: false,
				rules: {
					userName: [{
						required: true,
						message: "账号不能为空",
						trigger: "blur"
					}, ],
					pwd: [{
						required: true,
						message: "密码不能为空",
						trigger: "blur"
					}, 
					{ pattern: /^\d{6}$/, message: '请输入6位数字', trigger: 'blur'  }],
					
				},
			}
		},
		methods: {
			//将权限查询出来
			//查询用户列表
			findUser() {
				this.$http.post(this.baseUrl + 'SchoolSys/user/find', {
					pageSize: this.pageSize + "",
					pageIndex: this.pageIndex + ""
				}).then(res => {
					if (res.data.code == 200) {
						this.userList = res.data.data.list
						this.totaSize = res.data.data.pageCount

					}
				})
			},
			deleteuser(projectData) {
				this.dialogTableVisible = true
				// this.deluserName=projectData.userName
				this.formData.userName = projectData.userName
				this.deluserId = projectData.userId
			},
			//删除
			delOk() {
				if(this.DquserId==this.deluserId){
					this.$message.error("该账号正在登陆，不能删除")
				}else{
					this.$http.post(this.baseUrl + "SchoolSys/user/del", {
					userId: this.deluserId
				}).then(res => {
					if (res.data.code == 200) {
						this.$message.success("用户删除成功")
						this.dialogTableVisible = false
						this.pageIndex = 1

						this.findUser()
					} else {
						this.$message.error(res.data.msg)
					}
				})
				}
		
			},
			// 根据权限名称查询对应的id
			findRoleId(){
				for(var i=0;i<this.checkList2.length;i++){
					this.themes.forEach(v=>{
						if(this.checkList2[i]==v.roleName){
							this.roleIds.push(v.roleId)
						}
					})
				}
			},
			findRoleIdTwo(){
				this.roleIds=[]
				for(var i=0;i<this.RoleNames.length;i++){
					this.themes.forEach(v=>{
						if(this.RoleNames[i]==v.roleName){
							this.roleIds.push(v.roleId)
						}
					})
				}
			},
			//添加
			adduser() {
				this.centerDialogVisible = true
				this.formData.userName = ""
				this.formData.roleName = ""
				this.formData.pwd = ""
			},
			addUserManagement(form) {
		
				this.findRoleId()

				if(this.roleIds.length==0){
					this.$message.error("请填写完整信息")
				}else{
					this.$refs[form].validate((valid) => {
					if (valid) {
						this.$http.post(this.baseUrl + 'SchoolSys/user/add', {
							userName: this.formData.userName,
							pwd: this.formData.pwd,
							roleIds: this.roleIds
						}).then(res => {
							if (res.data.code == 200) {
								this.$message.success("用户添加成功")
								this.centerDialogVisible = false
								this.findUser()
							} else {
								this.$message.error(res.data.msg)
							}
						})
					}
				});
				}
			
			},
			//添加里的取消
			cancel2(formName){
				this.centerDialogVisible = false
				// this.formData.userName = ""
				// this.formData.roleName = ""
				// this.formData.pwd = ""
				this.$refs[formName].resetFields();//重置表单
			},
			//修改
			Reviseuser(projectData) {
				this.RoleNames=[]
				this.formData.pwd=""
				this.ReviseDialogVisible = true
				this.formData.userName = projectData.userName
				this.changeuserId = projectData.userId
				this.originalName = projectData.userName
				projectData.roles.forEach(v => {
						this.RoleNames.push(v.roleName)
					});	
					this.findRoleIdTwo()
					this.originalRoleid=this.roleIds
			},
			ReviseUserManagement(form) {
					this.findRoleIdTwo()
					if(this.roleIds.length==0){
						this.$message.error("请填写全部信息")
					}else{
						var obj = {}
						// console.log(this.originalRoleid==this.roleIds)
						if (this.originalName != this.formData.userName) {
							obj = {
								userName: this.formData.userName,
								pwd: this.formData.pwd,
								userId: this.changeuserId
							}
						}  else {
							obj = {
								userName: this.formData.userName,
								pwd: this.formData.pwd,
								roleIds: this.roleIds,
								userId: this.changeuserId
							}
						}
						this.$refs[form].validate((valid) => {
							if (valid) {
								this.$http.post(this.baseUrl + "SchoolSys/user/update", obj).then(res => {
									if (res.data.code == 200) {
										//修改成功
										this.$message.success("修改成功")
										this.formData.pwd=""
										this.RoleNames=[]
										this.ReviseDialogVisible = false
										this.pageIndex = 1
										this.findUser()
									} else {
										this.$message.error(res.data.msg)
									}
								})
							}
						});
					}
			
			},
			//取消
			cancel(formName) {
				this.ReviseDialogVisible = false,
				this.$refs[formName].resetFields()
				// this.formData.userName = "",
				// this.formData.roleName = "",
				// this.formData.pwd = ""
			},
			//改变页
			changePage(page) {
				this.pageIndex = page;
				if(this.inpWord != "" && this.inpRole != ""){
					this.searchUser(3)
				}else if (this.inpWord != "") {
					this.searchUser(1)
				} else if (this.inpRole != "") {
					this.searchUser(2)
				} else {
					this.findUser()
				}
			},
			//搜索			
			getSearchUserManage() {
				this.$http.post(this.baseUrl + "SchoolSys/user/findByName", {
					pageIndex: this.pageIndex + "",
					pageSize: this.pageSize + "",
				}).then(res => {
					//console.log(res)
					this.totaSize = res.data.data.num * this.pageSize
					if (res.data.code == 200) {
						this.userList = res.data.data.list
					}
				})
			},
			//回车搜索
			searchUserManager(index) {
				this.pageIndex = 1
				if (this.inpWord != "" && this.inpRole == "") {
					this.inpRole = ""
					this.searchUser(1)
				} else if (this.inpRole != "" && this.inpWord == "") {
					this.inpWord = ""
					this.searchUser(2)
				} else {
					this.searchUser(3)
				}
			},
			//单击搜索
			searchUserManagerClick() {
				this.pageIndex = 1
				if (this.inpWord != "" && this.inpRole == "") {
					this.inpRole = ""
					this.searchUser(1)
				} else if (this.inpRole != "" && this.inpWord == "") {
					this.inpWord = ""
					this.searchUser(2)
				} else {
					this.searchUser(3)
				}
			},
			searchUser(index) {
				//console.log(index);
				if (index == 1) {
					this.$http.post(this.baseUrl + "SchoolSys/user/findByName", {
						userName: this.inpWord + "",
						pageIndex: this.pageIndex + "",
						pageSize: this.pageSize + "",
					}).then(res => {
						if (res.data.code == 200) {
							this.userList = res.data.data.list
							this.totaSize = res.data.data.pageCount
						}
					})
				} else if (index == 2) {
					this.$http.post(this.baseUrl + "SchoolSys/user/findByName", {
						roleName: this.inpRole + "",
						pageIndex: this.pageIndex + "",
						pageSize: this.pageSize + "",
					}).then(res => {
						if (res.data.code == 200) {
							this.userList = res.data.data.list
							this.totaSize = res.data.data.pageCount
						}
					})
				} else {
					this.$http.post(this.baseUrl + "SchoolSys/user/findByName", {
						userName: this.inpWord + "",
						roleName: this.inpRole + "",
						pageIndex: this.pageIndex + "",
						pageSize: this.pageSize + "",
					}).then(res => {
						if (res.data.code == 200) {
							this.userList = res.data.data.list
							this.totaSize = res.data.data.pageCount
						}
					})
				}
			},
			//查询用户权限(是否有老师选项)
			userRoleTeacher() {
				this.$http.post(this.baseUrl + "SchoolSys/role/findAll", {
					status: 1
				}).then(res => {
					if (res.data.code = 200) {
						this.themes = res.data.data
					}
				})
			},
		},
		mounted() {
			this.findUser()
			this.userRoleTeacher()
			this.roleId = sessionStorage.getItem("roleId")
			this.userName = sessionStorage.getItem("userName")
			this.pwd = sessionStorage.getItem("password")
			this.DquserId=sessionStorage.getItem("userId")
			//console.log(this.roleId,this.userName,this.pwd)
		}
	}
</script>

<style lang="less">
	@colorF: #fff;
	@colorT: #333;
	@font: font-size;
	@toCenter: text-align;

	.backg {
		background-color: #106ab1;
		color: @colorF;
	}
	.gray {
		background-color: #999999;
		color: @colorF;
	}
	.wrapZ {
		padding: 40px;
		.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
		.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
			content: '';
			margin-right: 0;
		}
		.el-input {
			width: 75%;
		}
		.el-select {
			width: 75%;
			.el-input {
				width: 100% !important;
			}
		}
		.wid {
			width: 30%
		}
		.tp {
			margin-top: 30px;
		}
		.top {
			display: flex;
			justify-content: space-between;
			.input {
				display: flex;
				align-items: center;
				.el-input {
					width: 250px;
					margin-right: 20px;
				}
			}
		}
		.formList {
			margin-top: 40px;
			.el-table {
				margin: 0;
				background: transparent;
				color: @colorT;
				@font: 15px;
				th {
					@{toCenter}: center;
				}
				* {
					border: none !important;
				}
				thead {
					color: @colorT;
				}
			}
			.el-pagination {
				@{toCenter}: center;
				margin-top: 30px;
			}
			.el-table--enable-row-transition .el-table__body td.el-table__cell {
				@{toCenter}: center;
			}
			.el-table::before {
				height: 0;
			}
			.el-table__body {
				border-spacing: 0 8px;
			}
		}
		.el-dialog__body {

			@font: 20px;
		}
		.el-dialog {
			width: 30%;
		}
		.el-form-item__label {
			width: 75px;
			@font: 15px;
			color: @colorT;
		}
		.el-table th.el-table__cell {
			background: #f3f8fd;
		}
		.el-dialog__footer {
			padding: 10px 20px 50px;
			@{toCenter}: center;
		}
		.el-dialog__body {
			@{toCenter}: center;
			@font: 20px;
		}
	}
</style>